<template>
  <el-dialog
    append-to-body
    :close-on-click-modal="false"
    :visible.sync="dialogFormVisible"
    :before-close="close"
    :title="title"
    width="800px"
    :top="'10vh'"
  >
    <el-form ref="form" :model="form" size="small" label-width="120px">
      <div class="custom-tips">
        基础设置
      </div>
      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item
            label="模版名称"
            prop="name"
            :rules="[{ required: true, message: '请输入模版名称', trigger: 'blur' }]"
            style="width: 100%"
          >
            <el-input v-model="form.name" clearable placeholder="请输入模版名称" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item
            label="可用平台"
            prop="kypt"
            :rules="{ required: true, message: '请选择可用平台', trigger: 'change' }"
            style="width: 100%"
          >
            <el-radio-group v-model="form.kypt" style="width:100%" @change="changeObject">
              <el-radio
                v-for="item in ptList"
                :key="item.id"
                :label="item.id"
              >{{ item.name }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            label="模版类型"
            prop="ssdl"
            :rules="[{ required: true, message: '请选择模版类型', trigger: 'change' }]"
            style="width: 100%"
          >
            <el-select v-model="form.ssdl" clearable placeholder="请选择模版大类" @change="changeObject">
              <el-option
                v-for="item in tempParent"
                :key="item.code"
                :label="item.name"
                :value="item.code"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            label="模版"
            prop="mbmc"
            :rules="[{ required: true, message: '请选择模版', trigger: 'change' }]"
            style="width: 100%"
          >
            <el-select v-model="form.mbmc" clearable placeholder="请选择模版">
              <el-option
                v-for="item in template"
                :key="item.code"
                :label="item.name"
                :value="item.code"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            label="数据来源"
            prop="sjlx"
            :rules="[{ required: true, message: '请选择数据来源', trigger: 'change' }]"
            style="width: 100%"
          >
            <el-select v-model="form.sjlx" clearable placeholder="请选择数据来源" @change="dataChange">
              <el-option
                v-for="item in dataTypes"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            label="数据项"
            prop="dataEnId"
            :rules="[{ required: true, message: '请选择数据项', trigger: 'change' }]"
            style="width: 100%"
          >
            <el-select v-model="form.dataEnId" clearable placeholder="请选择数据源" @change="dataObject">
              <el-option
                v-for="item in dataSource"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            label="数据类型"
            prop="type"
            :rules="[{ required: true, message: '请选择数据类型', trigger: 'change' }]"
            style="width: 100%"
          >
            <el-select v-model="form.type" clearable placeholder="请选择数据类型">
              <el-option
                v-for="item in paramsType"
                :key="item.id+'-id'"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="text" @click="close">取消</el-button>
      <el-button :loading="loading" type="primary" @click="save('form')">确认</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { updateObject, saveObject } from '@/api/portal/manager/entityTemp/index'
import {
  queryAllKypt,
  queryAllPcTempEntity,
  queryAllAppTempEntity, querySjlx,
  queryAllEntityDl, queryAllTempParams, queryAllSystemDatasource
} from '@/api/portal/manager/setting/index'
import { queryAllDataSource } from '@/api/portal/manager/entityData/index'
export default {
  name: 'DbTaskManagerEntity',
  data() {
    return {
      title: '数据项管理',
      loading: false,
      dialogFormVisible: false,
      ptList: [],
      tempParent: [],
      template: [],
      dataSource: [],
      dataTypes: [],
      paramsList: [],
      paramsType: [],
      form: {
        id: null,
        name: '',
        kypt: null,
        ssdl: '',
        sjlx: null,
        dataEnId: null,
        mbmc: '',
        params: '',
        type: null,
        jxx: '',
        pzx: ''
      }
    }
  },
  created() {
    this.initPt()
    this.initDataType()
    this.initAllDl()
    this.initType()
  },
  methods: {
    openEntity(data) {
      this.queryData = null
      if (undefined !== data && undefined !== data.id && data.id !== null) {
        this.form = Object.assign({}, data)
        this.title = '修改信息'
        this.dialogFormVisible = true
        this.dataChange()
        this.changeObject()
      } else {
        this.title = '新增信息'
        this.dialogFormVisible = true
      }
    },
    save(formName) {
      this.loading = true
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.form.id !== null && undefined !== this.form.id) {
            updateObject(this.form).then(res => {
              this.$message.success('更新成功！')
              this.close()
            }).catch(() => {
              this.loading = false
              this.$message.error('更新失败！')
            })
          } else {
            console.log(this.form.params)
            saveObject(this.form).then(res => {
              this.$message.success('保存成功！')
              this.close()
              this.loading = false
            }).catch(() => {
              this.loading = false
              this.$message.error('保存失败！')
            })
          }
        } else {
          this.loading = false
          console.log('error submit!!')
          return false
        }
      })
    },
    initPt() {
      queryAllKypt().then(res => {
        const { data } = res
        this.ptList = data
      })
    },
    initType() {
      queryAllTempParams().then(res => {
        const { data } = res
        this.paramsType = data
      })
    },
    initDataType() {
      querySjlx().then(res => {
        const { data } = res
        this.dataTypes = data
      })
    },
    dataObject(data) {
      if (undefined !== data && data !== null) {
        const entity = this.dataSource.filter(item => {
          if (item.id === data) {
            return item
          }
        })
        if (undefined !== entity && entity !== null && entity.length > 0) {
          const cs = entity[0].params
          if (undefined !== cs && cs !== null) {
            const params = JSON.parse(cs)
            const newParams = params.filter(item => { // 过滤出需要传值的参数
              if (item.valueType === 6) {
                return item
              }
            })
            this.form.params = JSON.stringify(newParams)
          }
          const jxx = entity[0].jxx
          if (undefined !== jxx && jxx !== null) {
            this.form.jxx = jxx
          }
        }
      }
    },
    dataChange() {
      if (this.form.sjlx !== null && this.form.sjlx !== '') {
        if (this.form.sjlx === 1) {
          this.initDataSource()
        } else if (this.form.sjlx === 2) {
          this.initSystemData()
        }
      } else {
        this.form.sjx = null
      }
    },
    initDataSource() {
      queryAllDataSource().then(res => {
        const { data } = res
        this.dataSource = data.data
      }).catch(() => {
        this.dataSource = []
      })
    },
    initSystemData() {
      queryAllSystemDatasource().then(res => {
        const { data } = res
        this.dataSource = data
      })
    },
    changeObject() {
      if (this.form.kypt !== '' && this.form.kypt !== null && this.form.kypt !== '' && this.form.kypt !== null) {
        if (this.form.kypt === 'app') {
          queryAllAppTempEntity({ pid: this.form.ssdl }).then(res => {
            const { data } = res
            this.template = data
          }).catch(() => {
            this.template = []
          })
        } else if (this.form.kypt === 'all') {
          this.template = []
        } else if (this.form.kypt === 'pc') {
          queryAllPcTempEntity({ pid: this.form.ssdl }).then(res => {
            const { data } = res
            this.template = data
          }).catch(() => {
            this.template = []
          })
        }
      } else {
        this.tempFl = []
        this.form.mbfl = ''
      }
    },
    initAllDl() {
      queryAllEntityDl().then(res => {
        const { data } = res
        this.tempParent = data
      }).catch(() => {
        this.tempParent = []
      })
    },
    close() {
      this.loading = false
      Object.assign(this.$data.form, this.$options.data.call(this).form)
      this.dialogFormVisible = false
      this.$emit('fetch-data')
    }
  }
}
</script>

<style scoped>
.custom-tips {
  width: 100%;
  min-height: 40px;
  line-height: 40px;
  text-align: left;
  padding: 8px 16px;
  background-color: #ecf8ff;
  border-radius: 4px;
  border-left: 5px solid #50bfff;
  margin-bottom: 10px;
}
.button-add {
  width: 50px;
  height: 40px;
  float: right;
  text-align: center;
  line-height: 40px;
  margin-right: 20px;
}
</style>
